<template>
	<!-- 兼职求职 -->
	<view class="PartTimeJobSearch public">
		<view class="header-image">
			<image src="../../static/xiaoyutong/partTimeJob.png" mode=""></image>
		</view>
		<view class="main">
			<view class="main-item" v-for="item in postList" :key="item.id" @click="articleInfo(item)">
				<view class="main-item-header">
					<view class="user">
						<view class="user-image">
							<image v-if="item.member_info.headimg" :src="item.profilePhoto"></image>
							<image v-else src="@/static/mySelected.png"></image>
						</view>
						<view class="user-main">
							<view class="">
								{{ item.member_info.nickname || item.member_info.mobile }}
							</view>
							<view class="">
								{{ item.create_time }}
							</view>
						</view>
					</view>
					<view class="trade flexjcc" :class="item.type == 1 ? 'sell' : 'buy'">
						{{ item.type_text }}
					</view>
				</view>
				<view class="content-item">
					<text>职位名称：</text>
					{{ item.title }}
				</view>
				<view class="content-item">
					<text>招聘人数：</text>
					{{ item.num }}
				</view>
				<view class="content-item">
					<text>新酬：</text>
					{{ item.salary }}
				</view>
				<view class="content-item">
					<text>职位描述：</text>
					{{ item.desc }}
				</view>
				<view class="del" v-if="item.member_info.member_id == userId" @click.stop="handleDel(item)">删除</view>

			</view>
		</view>
		<view @click="skipAdd">
			<IconAdd></IconAdd>
		</view>
	</view>
</template>

<script>
import IconAdd from '@/components/IconAdd/index.vue'
const $api = require('@/utils/request.js').API

export default {
	components: {
		IconAdd
	},
	data() {
		return {
			userId: uni.getStorageSync('userId'),
			// 列表
			postList: [],
			// 分页
			page: 1,
			// 总页数
			page_count: 1,
		}
	},

	onShow() {
		this.getPostList()
	},
	// 触底事件
	onReachBottom() {
		if (this.page == this.page_count) {
			uni.showToast({
				title: '没有更多了',
				icon: 'none'
			})
		} else {
			this.page = this.page + 1
			this.getPostList()
		}
	},
	methods: {
		// 获取帖子列表
		getPostList() {
			$api.jobList({ page: this.page }).then(res => {
				this.page_count = res.data.data.page_count
				res.data.data.list.forEach(item => {
					item.profilePhoto = this.$image + item.member_info.headimg
				})
				if (this.page == 1) {
					this.postList = res.data.data.list
				} else {
					this.postList = [...this.postList, ...res.data.data.list]
				}
			})
		},
		// 删除
		handleDel(item) {
			this.page = 1
			$api.jobdel({ id: item.id }).then(res => {
				this.getPostList()
			})
		},
		// 跳转到发布页 
		skipAdd() {
			uni.navigateTo({
				url: './JobPosting'
			})
		},
		// 跳转到帖子详情
		articleInfo(item) {
			uni.navigateTo({
				url: './positionInformation?id=' + item.id
			})
		}
	}
}
</script>

<style lang="less" scoped>
.PartTimeJobSearch {
	background: #FBFBFB;

	.header-image {
		image {
			width: 750rpx;
			height: 312rpx;
		}
	}

	.main {
		.main-item {
			width: 702rpx;
			// height: 376rpx;
			background: #FFFFFF;
			border-radius: 5rpx;
			margin: auto;
			padding: 0 28rpx 20rpx 27rpx;
			margin-top: 12rpx;

			.main-item-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 31rpx;

				.user {
					display: flex;
					align-items: center;

					.user-image {
						padding-right: 19rpx;

						image {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
						}
					}

					.user-main {
						view:first-child {
							font-size: 30rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #1C1C1D;
						}

						view:last-child {
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #A4A4A7;
						}
					}
				}

				// 买家卖家
				.trade {
					width: 96rpx;
					height: 34rpx;
					border-radius: 17rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}

				// 买
				.buy {
					background: #EDA321;
				}

				// 卖
				.sell {
					background: #F14500;
				}
			}

			.content-item {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #464646;
				padding: 24rpx 0 0 0;

				text {
					color: #A4A4A7;
				}
			}
		}
	}
}

.del {
	margin-right: 20rpx;
	padding-bottom: 20rpx;
	color: #3c9cff;
	text-align: right;
}
</style>